﻿<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>普通管理员管理</title>
  <meta name="keywords" content="后台模板,后台管理系统,HTML模板">
  <meta name="description" content="基于Bootstrap的后台管理系统模板">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/fonts.css" rel="stylesheet">
  <!--标签插件-->
  <link rel="stylesheet" href="js/jquery-tags-input/jquery.tagsinput.min.css">
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <!--页面主要内容-->
  <main class="ftdms-layout-content">

    <div class="container-fluid" style="margin-bottom:90px; padding-bottom: 80px;">

      <div class="row" style="margin-top:15px;">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-body">

              <form action="/ad/guanli_add" method="post"  class="row" enctype="multipart/form-data">

                <div class="form-group col-md-12">
                  <label>头像上传</label>
                  <div class="form-controls">

                    <ul class="list-inline clearfix ftdms-uploads-pic">
                      <li class="col-xs-4 col-sm-3 col-md-2 is">
                        <figure>
                          <img src="" alt="图片一" class="imgs">
                        </figure>
                      </li>

                      <li class="col-xs-4 col-sm-3 col-md-2 " style="height: 133.84px;">
                        <a class="pic-add filef" id="add-pic-btn" href="javascript:;" title="点击上传"></a>
                        <input type="file" class="files" name="img"
                          style="position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;">
                      </li>
                    </ul>
                  </div>
                </div>

                <div class="form-group col-md-12">
                  <label for="seo_description">用户名</label>
                  <input class="form-control username" id="seo_description" name="username" rows="5" value=""
                    placeholder="用户名已存在则刷新页面">
                </div>
                <div class="form-group col-md-12">
                  <label for="seo_description">手机号</label>
                  <input class="form-control tel" id="seo_description" name="tel" rows="5" value="" placeholder="手机号已存在或输入错误则刷新页面">
                </div>
                <div class="form-group col-md-12">
                  <label for="seo_description">密码</label>
                  <input class="form-control password" id="seo_description" name="password" rows="5" value="" placeholder="密码">
                </div>
                <div class="form-group col-md-12">
                  <button type="submit" class="btn btn-primary ajax-post yes" target-form="add-form">确 定</button>
                  <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返
                    回</button>
                </div>
               
              </form>

            </div>
          </div>
        </div>

      </div>

    </div>

  </main>
  <!--End 页面主要内容-->
  </div>
  </div>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
  <!--标签插件-->
  <script src="js/jquery-tags-input/jquery.tagsinput.min.js"></script>
  <script type="text/javascript" src="js/main.min.js"></script>
  <script>
    //模拟点击
    $(".filef").click(function () {
      $(".files").click();
    })

    //实现上传图片可视化
    $(".files").change(function () {
      let files = this.files[0];
      if (this.files.lenght == 0) {
        return false;
      }
      if (files.size >= 4500000) {
        alert("图片必须小于4MB");
        return false;
      }
      if (!/\.(jpg|png|JPG|PNG|gif|webp|jpeg)$/.test(files.name)) {
        alert("图片后缀名必须是jpg|png|JPG|PNG|gif|webp|jpeg");
        return false;
      }
      let src = window.URL.createObjectURL(files);

      $(".imgs").prop('src', src)
      if ($(".imgs").attr("src")) {
      $(".is").css("display","block")
    }

    })

    if (!$(".imgs").attr("src")) {
      $(".is").css("display","none")
    }
  </script>
</body>

</html>